<div class="form">
	<div class="HITTemplateName">
		<b>Choose your Question Template:</b>
		<select name="question_template[name]" id="question_template_name">
			{% for ht in HITQuestionTemplates %}
	        <option value="{{ht.key}}" {% ifequal ht.TemplateFrameName questionFormTemplate.TemplateFrameName %} selected = selected {% endifequal %}>{{ht.TemplateFrameName}}</option>
	        {% endfor %}
		</select>
	</div>
	<div class="HITDescription">
		<div class="row">
	        <label class="caption">Frame Height (in pixels):</label>
	        <div class="field">
				<input type='text' value="{{questionFormTemplate.TemplateHeight}}" name="question_template[height]" id="question_template_height" />
			</div>
			<div class="help_small">&nbsp; Height of the display area for your HIT when viewed by workers.</div>
		</div>
    </div>
	<div class="HITFrame">
		<textarea name="question_template[html]" id="question_template_html" rows="20" cols="116">
			{{questionFormTemplate.TemplateMetaHtml}}
		</textarea>
		<!--<input type='button' value='Save As New Question Form' id='saveTemplateFormBtn' />
		<input type='text' id='newquestiontemplateName' />-->
	</div>
    <div class="row">
        <label class="caption">Please upload Data Values to fill in the Question Template:</label>
        <div class="field">
            <input type="file" name="uploadfile" id="uploadfile" />
            <input type=submit value="Upload File" />
        </div>
    </div>
</div>
<script type='text/javascript'>
	$(document).ready(function(){		
		$("#question_template_name").change(function(){
			$.get("/get/hqt", {"htid":$(this).val()}, function(html){
				$("#tab-3").html(html);
			})
		})
		var editor = new TINY.editor.edit('editor',{
			id:'question_template_html',
			width:870,
			height:200,
			cssclass:'te',
			controlclass:'tecontrol',
			rowclass:'teheader',
			dividerclass:'tedivider',
			controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
					  'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
					  'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
					  'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
			footer:true,
			fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
			xhtml:true,
			cssfile:'style.css',
			bodyid:'editor',
			footerclass:'tefooter',
			toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
			resize:{cssclass:'resize'}
		});	
		
		$("#createhitform").submit(function(){
			editor.post();
			return true;
		})
	})
</script>